<template>
	<view class="content">
		<view v-if="userinfo" class="content_image">
			<image :src="url" mode="aspectFill" @click="changImg"></image>
		</view>
		<view v-else class="content_image">
			<image src="../../static/userbackground.png" mode="aspectFill" @click="changImg"></image>
		</view>
		<!-- 内容 -->
		<view class="content_botton">
			<view class="content_info" v-if="userinfo">
				<view v-if="userinfo.img">
					<image :src="userinfo.img" mode="" @click="upload"></image>
				</view>
				<view v-else>
					<image src="../../static/icon/touxiang.png" mode="widthFix" @click="upload"></image>
				</view>
				<view class="username">
					{{userinfo.username}}
				</view>
				<view class="select">
					<view @click="userpet">我的宠物</view>
					<view @click="Vip">{{userinfo.name}}</view>
					
				</view>
			</view>
			<view v-else class="content_info">
				<image src="../../static/icon/touxiang.png" mode="widthFix" @click="login"></image>
				<view class="username">点击图片登录</view>
			</view>
			<!--  -->
			<view class="my_order" @click="order">
				<view class="my_order_title">
					我的订单
						<!-- <text class="title">我的订单</text> -->
						<!-- <image src="/static/icon/xiangyou1.png" mode="widthFix"></image> -->
				</view>
				<view class="my_order_item" v-for="item in list">
					<view class="my_order_content">
						<image :src="item.url" mode="widthFix"></image>
						<view class="">{{item.name}}</view>
					</view>
				</view>
			</view>
			<!--  -->
			<view class="my_order" @click="serviceorder">
				<view class="my_order_title">
					我的预约
				</view>
				<view class="my_order_item" v-for="item in list2">
					<view class="my_order_content">
						<image :src="item.url" mode="widthFix"></image>
						<view class="">{{item.name}}</view>
					</view>
				</view>
			</view>
			<!--  -->
			<view class="other">
				<view class="other_addres" @click="userInfo">
					<view>用户信息</view>
					<image src="/static/icon/xiangyou1.png" mode="widthFix" ></image>
				</view>
				<view class="other_addres" @click="addAdress">
					<view>我的地址</view>
					<image src="/static/icon/xiangyou1.png" mode="widthFix"></image>
				</view>
				<view class="other_addres" @click="contact">
					<view>联系我们</view>
					<image src="/static/icon/xiangyou1.png" mode="widthFix" ></image>
				</view>
				<view class="other_our" @click="goout">
					<view>退出登录</view>
					<image src="/static/icon/xiangyou1.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						id: 1,
						url: '/static/icon/quanbudingdan.png',
						name: "全部订单"
					},
					{
						id: 2,
						url: '/static/icon/31daifukuan.png',
						name: "待支付"
					},
					{
						id: 3,
						url: '/static/icon/31daifahuo.png',
						name: "待发货"
					},
					{
						id: 4,
						url: '/static/icon/daishouhuo.png',
						name: "待收货"
					},
					{
						id: 5,
						url: '/static/icon/shouhou.png',
						name: "售后"
					}
				],
				list2: [{
						id: 1,
						url: '/static/icon/quanbudingdan.png',
						name: "全部预约"
					},
					{
						id: 2,
						url: '/static/icon/daiqiandao.png',
						name: "待签到"
					},
					{
						id: 3,
						url: '/static/icon/yiqiandao.png',
						name: "已签到"
					},
					{
						id: 4,
						url: '/static/icon/yiquxiao.png',
						name: "已取消"
					},
					{
						id: 5,
						url: '/static/icon/yiguoqi.png',
						name: "已过期"
					}
				],
				url: '../../static/userbackground.png',
				userinfo: null,
			}
		},
		onShow() {
			this.refreshData();
		},
		onLoad() {
			this.state()
		},
		methods: {
			state() {
				const token = uni.getStorageSync('Authorization');
				if (!token) {
					this.userinfo = null;
					this.url = '../../static/userbackground.png';
					return;
				}
				const url = 'http://localhost:8887/user/userInfo';
				const header = {
					'Authorization': token,
					'Content-Type': 'application/json',
				};
				uni.request({
					url,
					method: 'GET',
					header,
					success: (res) => {
						if (res.data.code === 200) {
							this.userinfo = res.data.data;
							const url2 = uni.getStorageSync('url');
							if (!url2) {
								this.url = '../../static/userbackground.png';
								return;
							}
						} else if (res.data.status === 'unauthorized') {
						}
					},
					fail: () => {
						uni.showToast({
							title: '请求失败',
							icon: 'none'
						});
					}
				});
			},
			upload(){
				uni.chooseImage({
				        count: 1,
				        sizeType: ['original', 'compressed'],
				        sourceType: ['album'],
				        success: (res) => {
				          const filePath = res.tempFilePaths[0];
				          uni.uploadFile({
				            url: 'http://localhost:8887/upload',
				            filePath: filePath,
				            name: 'file',
				            success: (uploadRes) => {
				              const data = JSON.parse(uploadRes.data);
				              if (data.code === 200) {
				                this.userinfo.img = data.data; // 更新本地用户信息的头像地址
								 this.updateImg(data.data);
				              } else {
				                uni.showToast({
				                  title: '上传失败',
				                  icon: 'none'
				                });
				              }
				            },
				            fail: () => {
				              uni.showToast({
				                title: '上传失败',
				                icon: 'none'
				              });
				            }
				          });
				        }
				      });
			},
			 refreshData() {
			      this.state();
			      this.url = uni.getStorageSync('url');
			      let collect = uni.getStorageSync('collect');
			    },
			 updateImg(imgUrl) {
			      const token = uni.getStorageSync('Authorization');
			      if (!token) {
			        uni.showToast({
			          title: '请先登录',
			          icon: 'none'
			        });
			        return;
			      }
			      const url = 'http://localhost:8887/user/updateimg';
			      const header = {
			        'Authorization': token,
			        'Content-Type': 'application/json',
			      };
			      const user = {
			        img: imgUrl,
			      };
			      uni.request({
			        url,
			        method: 'POST',
			        header,
			        data: user,
			        success: (res) => {
			          if (res.data.code === 200) {
			            uni.showToast({
			              title: '头像更新成功',
			              icon: 'success'
			            });
			            // 更新本地用户信息的头像地址
			            this.userinfo.img = res.data.data.img;
			          } else {
			            uni.showToast({
			              title: '更新失败',
			              icon: 'none'
			            });
			          }
			        },
			        fail: () => {
			          uni.showToast({
			            title: '请求失败',
			            icon: 'none'
			          });
			        }
			      });
			    },
			changImg() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths))
						uni.setStorageSync('url', res.tempFilePaths[0])
					}
				});
				this.refreshData()
				uni.usei
			},
			login() {
				uni.navigateTo({
				  url: '/pages/login/login'
				});
			},
			Vip(){
				uni.navigateTo({
				  url: '/pages/vip/vip'
				});
			},
			contact(){
				uni.navigateTo({
				  url: '/pages/contact/contact'
				});
			},
			addAdress(){
				uni.navigateTo({
				  url: '/pages/useraddress/useraddress'
				});
			},
			userInfo(){
				uni.navigateTo({
				  url: '/pages/userInfo/userInfo'
				});
			},
			userpet(){
				uni.navigateTo({
				  url: '/pages/userpet/userpet'
				});
			},
			order(){
				uni.navigateTo({
				  url: '/pages/order/order'
				});
			},
			serviceorder(){
				uni.navigateTo({
				  url: '/pages/serviceorder/serviceorder'
				});
			},
			goout() {
			    uni.showModal({
			        title: '提示',
			        content: '确定要退出登录吗？',
			        success: (res) => {
			            if (res.confirm) {
			                uni.removeStorageSync('Authorization');
			                uni.removeStorageSync('userinfo');
			                uni.showToast({
			                    title: '退出登录成功',
			                    icon: 'success'
			                });
			                this.userinfo = null; // 清空用户信息
			                this.url = ''; // 如果有其他依赖于用户信息的数据，也应该清空
			                // 强制页面刷新或者跳转到登录页面
			                uni.reLaunch({
			                    url: '/pages/login/login'
			                });
			            } else if (res.cancel) {
			                console.log('用户点击取消');
			            }
			        }
			    });
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #eee;
	}

	.content_image {
		image {
			// 高斯模糊
			filter: blur(3rpx);
			width: 100%;
		}

		height: 300rpx;
		position: relative;
	}

	.content_botton {
		.noLogin {
			position: absolute;
			left: 45%;
			transform: translate(-50%);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			margin-top: 15%;
			margin-left: 5%;
			border-radius: 20rpx;
			width: 90%;
			height: 250rpx;
			background-color: #fff;
			justify-content: center;
			align-items: center;
			position: relative;

			image {
				width: 100rpx;
				height: 100rpx;
			}
		}

		.content_info {
			position: relative;
			z-index: 999;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			margin-top: 15%;
			margin-left: 5%;
			border-radius: 20rpx;
			width: 90%;
			height: 250rpx;
			background-color: #fff;

			image {
				margin-top: -40rpx;
				width: 130rpx;
				height: 130rpx;
				border-radius: 50%;
			}

			.username {}

			.select {
				display: flex;
				justify-content: space-between;

				view {
					padding: 0 40rpx;
				}
			}
		}

		.my_order {
			width: 90%;
			margin-top: 10rpx;
			margin-left: 5%;
			height: 280rpx;
			border-radius: 20rpx;
			background-color: #fff;

			.my_order_title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-radius: 20rpx;
				padding-left: 20rpx;
				line-height: 80rpx;
				height: 80rpx;
				
			
				.title {
					font-size: 18px;
					font-weight: bold;
				}
			
				// image {
				// 	width: 40rpx;
				// 	height: 40rpx;
				// 	margin-right: 10px;
				// }
			}

			.my_order_item {
				padding: 2%;
				float: left;

				.my_order_content {
					// background-color: red;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;

					image {
						width: 80rpx;
						height: 50rpx;
					}
				}
			}
		}
	}

	.other {
		margin: 10rpx 40rpx;
		height: 400rpx;
		width: 90%;
		border-radius: 20rpx;
		background-color: #fff;

		.other_addres {
			height: 60rpx;
			padding: 20rpx 20rpx;
			border-bottom: 1rpx dashed gainsboro;
			display: flex;
			justify-content: space-between;

			image {
				width: 50rpx;
			}
		}

		.other_our {
			height: 60rpx;
			padding: 20rpx 20rpx;
			display: flex;
			justify-content: space-between;

			image {
				width: 50rpx;
			}
		}
	}
</style>